<template>
    <div class="topSearch top e-form">
        <el-form :model="searchForm" style="width:100%" label-width="200px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="日期：" prop="time">
                        <el-date-picker
                            v-model="searchForm.time"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始月份"
                            lable=""
                            end-placeholder="结束月份"
                            @change="changeDate"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构：" prop="orgName">
                        <el-input
                            v-model="searchForm.orgName"
                            placeholder="请选择"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy"
                                @click="onSelectOrg"
                            ></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设备类别：" prop="categoryName">
                        <el-input
                            v-model="searchForm.categoryName"
                            placeholder="请选择"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy"
                                @click="selectMaterialType"
                            ></i>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="物资名称：" prop="materialName">
                        <el-input
                            v-model="searchForm.materialName"
                            placeholder="请输入"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="规格型号：" prop="spec">
                        <el-input
                            v-model="searchForm.spec"
                            placeholder="请输入"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-button
                            type="primary"
                            class="btn-blue"
                            @click="getList"
                            size="small"
                            v-debounce='3000'
                            >搜索</el-button
                        >
                        <el-button
                            type="primary"
                            class="btn-greenYellow"
                            @click="clearSearch"
                            size="small"
                            v-debounce='3000'
                            >重置</el-button
                        >
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { selectDataClient } from '@/utils/common'
export default {
    data () {
        return {
            searchForm: {
                endDate: '',
                materialCategoryId: '',
                categoryName: '',
                materialName: '',
                spec: '',
                startDate: '',
                orgId: localStorage.getItem('searchOrgId'),
                orgName: localStorage.getItem('searchOrgName'),
                time: ''
            }
        }
    },
    methods: {
        getList () {
            this.$emit('search', this.searchForm)
        },
        //选择机构
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '',    // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.orgId =  val[0].orgId
                this.searchForm.orgName = val[0].orgName
            })
        },
        //选择物资类别
        selectMaterialType () {
            const ids = [this.searchForm.categoryId]
            selectDataClient({
                SelectServiceToken: '/material/categoryLibrary/queryListByParentClassId', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: ids, // 已选中id
                InitParamsStr: JSON.stringify({
                    'parentiId': '0',
                    'topClassNameNeedless': ['主要材料']
                }), //初始化参数
                Title: '选择物资' // 标题
            }).then(val => {
                this.searchForm.materialCategoryId = val[0].levelPathId
                this.searchForm.categoryName = val[0].levelPathName
            })
        },
        //重置
        clearSearch () {
            this.searchForm = {
                endDate: '',
                materialCategoryId: '',
                categoryName: '',
                materialName: '',
                spec: '',
                startDate: '',
                orgId: localStorage.getItem('searchOrgId'),
                orgName: localStorage.getItem('searchOrgName'),
                time: '',
            },
            this.getList()
        },
        changeDate (val) {
            this.searchForm.startDate = val[0]
            this.searchForm.endDate = val[1]
        }
    }
}
</script>

<style lang="scss" scoped>
    .topSearch{
        display: flex;
        padding: 20px;
        justify-content: flex-start;
        .el-form-item{
            margin-bottom: 0;
            width: auto;
            margin: 10px;
        }
        .top-box{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
    }
</style>